@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/demand/hr_details.css')}}">
@section('content')
<div class="mainHrContent" id="demandsupplierdetails">
    <div class="storelistMain">
        <div class="storelistTitle">
            <span class="storelistTitle_left">
                <span>当前位置：</span>
                <span><a href="{{route('home.index.index') }}">首页</a> >
                    <a href="{{route('home.demand.demandList') }}">所有需求</a>
                    > @{{stepData.title}}
                </span>
            </span>
            <span class="storelistTitle_right">
                <span>找不到合适的供应商？发个需求试试？</span>
                <button @click=" window.location.href = '{{ route('home.demand.demandAdd') }}'">免费发布需求</button>
            </span>
        </div>
    </div>
    <div class="demandDtails">
        <div class="demandDtails_left">
            <!-- <div class="demanDetails_step">
                <div class="step_out desc active">客户发布需求</div>
                <div class="step_out desc active asc">供应商投标</div>
                <div class="step_out desc asc">获得客户联系方式
                    提供解决方案</div>
                <div class="step_out desc asc">达成合作，
                    与客户签订合同 </div>
                <div class="step_out asc">上传合同，
                    并支付服务费</div>
            </div> -->
            <div class="demandDetails_main" style="margin-top:0px;">
                <div class="basicInfo_title">
                    <span></span>
                    @{{stepData.title}}
                    <img v-if="stepData.urgent==2" src="{{URL::asset('./img/icon/jiaji.png')}}" alt="...">
                </div>
                <div class="demandDetails_main_content">
                    <div>
                        <span>
                            预算金额：<a> @{{stepData.price}}万元</a>
                        </span>
                        <span>
                            发布时间：@{{stepData.created_at}}
                        </span>
                        <span>
                            截止时间：<a>@{{stepData.end_at}}</a>
                        </span>
                        <span>
                            需求区域：<a>@{{stepDataArea.name}}</a>
                        </span>
                    </div>
                    <div>
                        <span>
                            公司名称：@{{stepData.company_name}}
                        </span>
                        <span>
                            公司类型：@{{stepData.company_type}}
                        </span>
                        <span>
                            公司行业：@{{stepData.company_industry}}
                        </span>
                        <span>
                            公司规模：@{{stepData.company_size}}
                        </span>
                    </div>
                    <div style="align-items: baseline;">
                        <span>
                            需求描述：
                        </span>
                        <span style="   white-space: normal;    line-height: 22px;">
                            @{{stepData.content}}
                        </span>
                    </div>
                </div>
            </div>
            <div class="demandDetails_main">
                <div class="basicInfo_title">
                    <span></span>
                    订单状态
                </div>
                <div class="demandDetails_main_content">
                    <el-timeline>
                        <el-timeline-item placement="top" v-for="(item, index) in stepDataStep" :key="index" color="rgb(209,0,24)" size="large" :timestamp="item.times">
                            <!-- HR第一步   -->
                            <div class="timelineContent" v-if="stepDataStep.length==1  && item.index==1">
                                <div class="demandDetails_title">
                                    <span>
                                        @{{item.content}}
                                    </span>
                                    <button @click="dialogVisible=true">查看供应商</button>
                                </div>
                            </div>
                            <!-- HR第二步 -->
                            <div class="timelineContent" v-if="(stepDataStep.length==2 || stepDataStep.length==3) && item.index==1">
                                <div class="demandDetails_title active">
                                    <span>
                                        @{{item.content}}
                                    </span>
                                </div>
                            </div>
                            <!-- HR第二步 -->
                            <div class="timelineContent" v-if="stepDataStep.length==2 && item.index==2">
                                <div class="demandDetails_title">
                                    <span>
                                        @{{item.content}}
                                    </span>
                                </div>
                                <div class="demandDetails_mes">
                                    <i></i>
                                    <span>
                                        @{{item.dec}}
                                        <button @click="dialogContract=true">评价</button>
                                    </span>
                                </div>
                            </div>
                            <!-- HR第三步 -->
                            <div class="timelineContent" v-if="stepDataStep.length==3 && item.index==2">
                                <div class="demandDetails_title active">
                                    <span>
                                        @{{item.content}}
                                    </span>
                                </div>
                            </div>
                            <div class="timelineContent" v-if="stepDataStep.length==3 && item.index==3">
                                <div class="demandDetails_title active">
                                    <span>
                                        @{{item.content}}
                                    </span>
                                </div>
                            </div>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </div>
        </div>
        <div class="demandDtails_right">
            <div class="demandLight">
                <img src="{{URL::asset('./img/icon/demandLight.png')}}">
                该类型的其他需求
            </div>
            <div class="demandLightList" v-for="item in rightData">
                <div class="ssaMoney">
                    <em style="font-size:16px;">￥</em>@{{item.price}}万
                </div>
                <div class="ssaContent">
                    <div class="ssaContent_header_name">@{{item.title}}</div>
                    <div class="ssaContent_header_main">
                        @{{item.content}}
                    </div>
                    <div class="ssaContent_header_mes">
                        <span class="ssaContent_header_span"><span style='color:#D10018'>@{{item.number}}</span>竞标</span>
                        <!-- <span class="ssaContent_header_span active"><span style='color:#F49423'>
                                2019-06-05
                            </span>
                            发布
                        </span> -->
                        <span class="ssaContent_header_span" style="border-left: 1px solid rgba(153, 153, 153, 1)"><span style='color:#D10018'>
                                @{{item.end_at}}
                            </span>
                            截止
                        </span>
                    </div>
                    <div class="ssaContent_header_footer">
                        <button>
                            <a :href="'{{route('home.demand.demandHRDetails') }}?demandId='+item.id+'&cid='+cid">
                                详情</a>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第一步 -->
    <el-dialog :visible.sync="dialogVisible" width="508px" :before-close="handleClose">
        <div class="basicInfo_title">
            <span></span>
            查看供应商
            <a class="dialogFalse" @click="handleClose">×</a>
        </div>
        <div class="dialogMain">
            <p class="logTitle" v-for="item in stepDataStore">
                @{{item.store_name}}
                <button><a @click="window.location.href = '{{ route('home.store.store') }}?id='+item.store_id">查看供应商</a></button>
            </p>
        </div>
    </el-dialog>
    <!-- 第二步 -->
    <el-dialog :visible.sync="dialogContract" width="508px" :before-close="handleClose">
        <div class="basicInfo_title">
            <span></span>
            评价
            <a class="dialogFalse" @click="handleClose">×</a>
        </div>
        <div class="dialogMainContract">
            <el-form :model="form" label-position="top" size="mini" :rules="rules" ref="ruleForm">
                <el-form-item prop="evaluate_content">
                    <p style="margin-bottom:5px"><span><em>*</em>
                            评价内容：
                        </span>
                    </p>
                    <p>
                        <textarea v-model="form.evaluate_content" placeholder="请输入您的评价...">
                </textarea>
                    </p>
                </el-form-item>
                <el-form-item prop="evaluate_contract">
                    <p style="align-items: flex-start;"><span>
                            <em>*</em>合同文件：
                        </span>
                        <el-upload class="upload-demo" :limit='1' :action="uploadUrl" :on-remove="handleRemove" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :file-list="form.evaluate_contract">
                            <span class="dialogUpload">
                                <span>
                                    <img src="{{URL::asset('./img/icon/dialogUpload.png')}}">

                                </span>
                                <span>文件需为：
                                    pdf格式</span>
                            </span>
                        </el-upload>
                    </p>
                </el-form-item>
            </el-form>
        </div>
        <button class="contractButton" @click="submitForm('ruleForm')">确定评价</button>
    </el-dialog>
    <el-dialog :visible.sync="dialogContractTrue" width="508px" :before-close="handleClose">
        <div class="basicInfo_title">
            <span></span>
            评价
            <a class="dialogFalse" @click="handleClose">×</a>
        </div>
        <div class="dialogMainContract" style="text-align:center;border:0px;padding-top: 20px;">
            <span class="successMes">

                请等待平台联系您，我们将送出
                <em>
                    现金红包
                </em>
            </span>
        </div>
    </el-dialog>
</div>
@endsection
@section('scripts')
<script>
    $(() => {
        let demandsupplierdetails = new Vue({
            el: '#demandsupplierdetails',
            data: () => {
                return {
                    dialogVisible: false,
                    uploadUrl: UPLOAD_FILE,
                    cid: getQueryString("cid") || '',
                    demandId: getQueryString("demandId"),
                    dialogContract: false,
                    dialogContractTrue: false,
                    fileList3: [],
                    rightData: [],
                    stepData: {},
                    stepDataArea: {},
                    stepDataStep: [],
                    stepDataStore: [],
                    stepList: {
                        step: 2,
                        list: [{
                            timestamp: '2018-04-12 20:46',
                            index: 0
                        }, {
                            timestamp: '2018-04-12 20:46',
                            index: 1
                        }, ]
                    },
                    form: {
                        evaluate_content: '',
                        evaluate_contract: ''
                    },
                    rules: {
                        evaluate_content: [{
                            required: true,
                            message: '请评价内容',
                            trigger: 'blur'
                        }],
                        evaluate_contract: [{
                            required: true,
                            message: '请选择文件',
                            trigger: 'change'
                        }],
                    }
                }
            },
            created() {
                let data = {
                    cid: getQueryString("cid")
                }
                apiAjax("{{ route('home.demand.rightRecommendDemandApi')}}", 'get', data, (res) => {
                    if (res.code == 0) {
                        this.rightData = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {

                });
                this.getDetails();
            },
            mounted() {

            },
            methods: {
                // 查询详情
                getDetails() {
                    let data = {
                        demand_id: this.demandId,
                    }
                    apiAjax("{{ route('home.demand.demandHrStepApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.stepData = res.data;
                            this.stepDataArea = res.data.area;
                            this.stepDataStep = res.data.step;
                            this.stepDataStore = res.data.store_name;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                //上传合同（第三部）
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let data = {
                                demand_id: this.demandId,
                                evaluate_content: this.form.evaluate_content,
                                evaluate_contract: this.form.evaluate_contract,
                            }
                            apiAjax("{{ route('home.demand.demandHrEvaluateApi')}}", 'post', data, (res) => {
                                if (res.code == 0) {
                                    this.$message({
                                        message: res.msg,
                                        type: 'success'
                                    });
                                    this.dialogContract = false;
                                    this.dialogContractTrue = true;
                                    this.getDetails();
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });
                                }
                            }, (erro) => {

                            });
                        } else {
                            return false;
                        }
                    });

                },

                handleClose(done) {
                    this.dialogVisible = false;
                    this.dialogContract = false;
                    this.dialogContractTrue = false;
                },
                beforeAvatarUpload(file) {
                    const type = file.name.split('.')[1];
                    const isJPG = type == 'pdf';
                    // const isJPG = file.type == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
                    //     file.type == 'pdf';

                    if (!isJPG) {
                        this.$message.error('上传文件只能是PDF!');
                    }
                    return isJPG;
                },
                handleAvatarSuccess(res, file) {
                    // this.form.evaluate_contract.push(res.data.path)
                    this.form.evaluate_contract = res.data.path
                },
                handleRemove(file, fileList) {
                    this.form.evaluate_contract = [];
                    fileList.forEach(element => {
                        // this.form.evaluate_contract.push(element.response.data.path)
                        this.form.evaluate_contract = element.response.data.path;
                    });
                },
            }
        })
    })
</script>
@endsection